/*
 * @Author: quinn.xie 
 * @Date: 2018-11-07 15:42:05 
 * @Last Modified by:   quinn.xie 
 * @Last Modified time: 2018-11-07 15:42:05 
 */

@import './color.scss';

*{ margin:0; padding:0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{padding:0; margin:0;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}


//BODY
body{
    font-family: 'Helvetica Neue', Helvetica,serif;
    background-image: linear-gradient(#3d464b,#6b7e84);
    background-attachment: fixed; 
    width: 100%;
    height: 100%;
    color: $duck_gray;
}

.bgNum{
    color: #ffffff;
    font-size: 500px;
    position: fixed;
    z-index: -1;
    opacity: .08;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.content{
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

// Water Fall
.waterfall{
    width:98%;
    margin: 1em auto;
    .list{
        column-count: 4;
        column-gap: 1em;
        .item{
            padding: 1em;
            margin: 0 0 1em 0;
            break-inside: avoid;
            background:rgba($color: #ffffff, $alpha: .1);
            border: 1px solid rgba($color: #ffffff, $alpha: .2);
            transition: all .2s;
            border-radius: 10px;
            color:#ffffff;
            font-size: 15px;
            font-family: Arial, Helvetica, sans-serif;
            &:hover{
                background:rgba($color: #ffffff, $alpha:.3);
            }
            img{
                width: 100%;
                margin-bottom:1em;
            }
        }
    }
}
